<template>
  <q-card flat v-if="userInfo && !loading">
    <q-card-section>
      <div class="row justify-center">
        <q-avatar size="100px">
          <q-img :src="userInfo.avatar" :ratio="1 / 1" />
        </q-avatar>
      </div>
      <div class="row justify-center">
        <div class="q-pt-md text-center">
          <div class="text-base">
            {{ userInfo.username }}
          </div>
          <div class="text-grey-7">
            {{ userInfo.summary }}
          </div>
        </div>
      </div>

      <div class="row justify-center">
        <q-btn
          v-if="userInfo.id == webStore.userInfo.id"
          flat
          icon="settings"
          color="info"
          label="兴趣设置"
          @click="
            () => {
              followDig = true;
            }
          "
        />
      </div>
      <div class="row justify-center">
        <div class="q-pt-md text-center" v-if="userInfo.homeLink">
          <div class="text-sm">主页地址</div>
          <div class="text-sm">
            <q-btn
              target="_blank"
              color="primary"
              flat
              size="md"
              no-caps
              :label="userInfo.homeLink"
              :href="userInfo.homeLink"
            />
          </div>
        </div>
      </div>
      <div class="row justify-around q-gutter-md">
        <q-btn
          flat
          :to="{
            path: '/personal/' + userInfo.id + '/follow',
          }"
        >
          <div>
            <div>{{ userInfo.favUserNum }}</div>
            <div>关注</div>
          </div>
        </q-btn>
        <q-btn
          flat
          :to="{
            path: '/personal/' + userInfo.id + '/fans',
          }"
        >
          <div>
            <div>{{ userInfo.fansNum }}</div>
            <div>粉丝</div>
          </div>
        </q-btn>
      </div>
    </q-card-section>
  </q-card>
  <q-card flat v-if="loading">
    <q-card-section>
      <div class="row justify-center">
        <q-skeleton size="100px" type="QAvatar" />
      </div>
      <div class="row justify-center">
        <div class="q-pt-md column items-center">
          <q-skeleton type="text" size="40px" />
          <q-skeleton type="text" class="w-60px" />
        </div>
      </div>
      <div class="row justify-center q-pt-md text-center q-gutter-sm">
        <q-btn flat>
          <div>
            <div><q-skeleton type="text" /></div>
            <div>关注</div>
          </div>
        </q-btn>
        <q-btn flat>
          <div>
            <div><q-skeleton type="text" /></div>
            <div>粉丝</div>
          </div>
        </q-btn>
        <q-btn flat>
          <div>
            <div><q-skeleton type="text" /></div>
            <div>文章</div>
          </div>
        </q-btn>
      </div>
      <div class="row justify-center">
        <div class="q-pt-md text-center">
          <div class="text-sm"><q-skeleton type="text" /></div>
          <div class="text-sm">
            <q-skeleton type="QBtn" />
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
  <q-card flat class="q-mt-sm">
    <q-list bordered>
      <q-item>
        <q-item-section>文章</q-item-section>
        <q-item-section v-for="item in articleTab" :key="item.code">
          <q-btn
            dense
            flat
            color="primary"
            :label="item.text"
            :to="'/personal/' + userId + '/' + item.code"
          />
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>用户</q-item-section>
        <q-item-section v-for="item in userTab" :key="item.code">
          <q-btn
            dense
            flat
            color="primary"
            :label="item.text"
            :to="'/personal/' + userId + '/' + item.code"
          />
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>兴趣</q-item-section>
        <q-item-section v-for="item in followTab" :key="item.code">
          <q-btn
            dense
            flat
            color="primary"
            :label="item.text"
            :to="'/personal/' + userId + '/' + item.code"
          />
        </q-item-section>
      </q-item>
    </q-list>
  </q-card>
</template>

<script setup lang="ts">
import { personalUser } from 'src/service/api';
import { onMounted, ref } from 'vue';
import { watch } from 'vue';
import { articleTab, userTab, followTab, userInfo, followDig } from './shared';
import { useWebStore } from 'src/stores/webStore';

const webStore = useWebStore();

const loading = ref(false);

const props = defineProps<{
  userId: string;
}>();

watch(
  () => props.userId,
  (val) => {
    if (val) {
      f5();
    }
  },
);

onMounted(() => {
  f5();
});

const f5 = () => {
  loading.value = true;
  personalUser({ id: props.userId }).then(({ data, error }) => {
    loading.value = false;
    if (!error) {
      userInfo.value = data;
    }
  });
};
</script>

<style scoped></style>
